<template>
  <view class="slider-container">
    <view class="slider-bg">
      <view 
        class="slider-handle" 
        :style="{ left: `${left}px` }" 
        @touchstart="onTouchStart" 
        @touchmove="onTouchMove" 
        @touchend="onTouchEnd"
      >
        <view class="arrow-icon flex-center">
			<image style="width: 30px;height: 24px;" src="../static/right.png" mode=""></image>
		</view>
      </view>
    </view>
    <text class="unlock-text">{{$t('verify.text3')}}</text>
    <!-- <text class="unlock-text" v-if="unlocked">已解锁</text> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      left: 0, // 滑块位置
      startX: 0, // 起始滑动位置
      sliderWidth: 300, // 滑块总宽度
      unlocked: false, // 是否解锁
    };
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    onTouchMove(e) {
      const deltaX = e.touches[0].clientX - this.startX;
      this.left = Math.min(Math.max(deltaX, 0), this.sliderWidth - 100);
    },
    onTouchEnd() {
      if (this.left >= this.sliderWidth - 100) {
        this.unlocked = true; // 达到解锁条件
		uni.navigateTo({
			url:'/pages/index/index'
		})
      } else {
        this.left = 0; // 滑块回到初始位置
      }
    },
  },
};
</script>

<style scoped>
.slider-container {
  width: 300px;
  height: 50px;
  border-radius: 25px;
  /* background: linear-gradient(90deg, #00c6ff, #0072ff); */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-bg {
  width: 100%;
  height: 100%;
  position: absolute;
}

.slider-handle {
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: left 0.3s;
  z-index: 11;
}

.arrow-icon {
  /* font-size: 18px; */
  /* color: #00c6ff; */
  width: 78px;
  height: 48px;
  background-color: #fff;
  border-radius: 20px;
}
.unlock-text {
  color: #fff;
  font-size: 17px;
  z-index: 10;
}
</style>
